import React, { Component } from 'react';
import Header from '../../components/Header';
import Search from '../../components/Search';
import { reqGetgoodsinfo,reqCartadd } from '../../http/api';
import './detail.less'
import {KoubeiOutline,ShopbagOutline,TruckOutline} from 'antd-mobile-icons'
import {successAlert} from '../../utils/alert'


class Detail extends Component {
    constructor(){
        super();
        this.state={
            goodsInfo:{}
        }
    }
    componentDidMount(){
        // 获取goodsInfo
        reqGetgoodsinfo(this.props.match.params).then(res=>{
            if(res.data.code===200){
                this.setState({
                    goodsInfo:res.data.list.length>0?res.data.list[0]:{}
                })
            }
        }).catch(err=>{
            console.log(err);
        })
    }
    async addShopCar(){
        let {goodsid} = this.state.goodsInfo;
        let params = {
            uid:JSON.parse(localStorage.getItem('userInfo')).uid,
            type:1,
            goodsid,
            num:1
        }
        try{
            let res = await reqCartadd(params);  
            if(res.data.code === 200){
                successAlert(res.data.msg)
            }
        }catch(err){
            console.log(err);
        }
                           
    }
    render() {
        let {img,goodsname,market_price,price,description} = this.state.goodsInfo;
        return (
            <div className='Detail'>
                <Header title={goodsname} back></Header>
                <Search></Search>
                <div className="pic">
                    <img src={img} alt="" />
                </div>
                <div className="con">
                    <div className="price">
                        <img src="/uploads/details_sign_top.png" alt="" />
                        <span>￥{price}</span>
                        <del>￥{market_price}</del>
                    </div>
                    <div className="desc">
                        {description}
                    </div>
                </div>
                <div className="footer">
                    <span><KoubeiOutline />客服</span>
                    <span><ShopbagOutline />店铺</span>
                    <span onClick={()=>this.props.history.push('/index/shopcart')}><TruckOutline></TruckOutline>购物车</span>
                    <button onClick={()=>this.addShopCar()}>加入购物车</button>
                    <button>立即购买</button>
                </div>
            </div>
        );
    }
}

export default Detail;
